<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var name = "window";

    function Person(name) {
        this.name = name;

        this.foo1 = function () {
            console.log(this.name);
        };

        this.foo2 = () => console.log(this.name);

        this.foo3 = function () {
            return function () {
                console.log(this.name);
            };
        };

        this.foo4 = function () {
            return () => {
                console.log(this.name);
            };
        };
    }

    var person1 = new Person('person1')
    var person2 = new Person('person2')

    // person1.foo1(); // person1  person1是new出来的 this指向了person1 所以this是person1
    // person1.foo1.call(person2); // person2 通过call强制指定了this是person2,所以是person2
    //
    // person1.foo2(); // person1  person1是new出来的 this指向了person1 箭头函数会往上层找this所以this是person1
    // person1.foo2.call(person2); // person1 person1是new出来的 this指向了person1 箭头函数会往上层找this所以this是person1(指定的person2对箭头函数无效)

    person1.foo3()(); // window foo3()返回了一个函数,这个函数被直接调用 所以this是window
    person1.foo3.call(person2)(); // window foo3返回了一个函数,指定了this是person2,但是这个person2与返回的函数无关,这个函数被直接调用 所以是window
    person1.foo3().call(person2); // person2 foo3()返回了一个函数,指定了this是person2 所以是 person2

    person1.foo4()(); // person1 foo4()返回了一个箭头函数,在foo4()中呢this是person1(因为是person1调用的),执行foo4()()的时候呢,箭头函数不认传进来的this,就往上层找,上层是person1
    person1.foo4.call(person2)(); // person2 foo4()返回了一个箭头函数,在foo4()中呢this是person2(强行指定的),执行foo4()()的时候呢,箭头函数不认传进来的this,就往上层找,上层是person1
    person1.foo4().call(person2); // person1 foo4()返回了一个箭头函数,在foo4()中呢this是person1(因为是person1调用的),执行foo4()()的时候呢,箭头函数不认传进来的this(虽然强行指定了person2,但是不认),就往上层找,上层是person1


</script>

</body>
</html>